<template>
  <div class="c-table-button-group">
    <template v-for="(button, buttonIndex) in localButtonGroup" :key="buttonIndex">
      <el-button
        text
        type="primary"
        :style="button.style"
        :loading="button.loading"
        :disabled="button.disabled"
        @click="button.onClick"
        v-if="checkBtnPermission(button)"
        >{{ button.text }}</el-button
      >
      <div
        class="c-table-button-group-line"
        v-if="buttonIndex < localButtonGroup.length - 1 && checkBtnPermission(button)"
      ></div>
    </template>
    <template v-if="moreButtons.length">
      <div class="c-table-button-group-line"></div>
      <el-dropdown @command="handleMoreButtonCommand" trigger="hover">
        <CIconButton
          size="small"
          type="primary"
          icon="c-xian-gengduoheng"
          disable-tooltip
        ></CIconButton>
        <template #dropdown>
          <el-dropdown-menu>
            <template v-for="(button, buttonIndex) in moreButtons" :key="buttonIndex">
              <el-dropdown-item
                :command="buttonIndex"
                v-if="checkBtnPermission(button)"
                :divided="button.divided"
                >{{ button.text }}</el-dropdown-item
              >
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </div>
</template>
<script lang="ts">
export default {
  name: 'CTableButtonGroup'
};
</script>
<script lang="ts" setup name="CTableButtonGroup">
import { defineProps, computed } from 'vue';
import { hasBtnPermission } from '@/directives/btnPermission';
import type { TableButtonItem } from './table-button-group';

interface CTableButtonGroupProps {
  buttonsConfig: TableButtonItem[];
  /**
   * 最大按钮个数，展示按钮的数量，超出的数量放在更多里(必须大于等于1)
   */
  showMoreNum?: number;
  /**
   * 是否包含，如果包含，则一共显示showMoreNum的个数的按钮，包含更多图标按钮
   */
  isInclude?: boolean;
}
const props = defineProps<CTableButtonGroupProps>();

const defaultOptions = {
  /**
   * 最大按钮个数，展示按钮的数量(必须大于等于1)
   */
  showMoreNum: 2,
  /**
   * 是否包含，如果包含，则一共显示showMoreNum的个数的按钮，包含更多图标按钮
   */
  isInclude: false
};

const showMoreNum = props.showMoreNum ?? defaultOptions.showMoreNum;

const isInclude = props.isInclude ?? defaultOptions.isInclude;

/**
 * 平铺按钮组
 */
const localButtonGroup = computed(() => {
  let btnArr = [];
  let btnLength = props.buttonsConfig?.length;
  for (let i = 0; i < btnLength; i++) {
    if (
      !props.buttonsConfig[i]?.btnPermission ||
      (props.buttonsConfig[i]?.btnPermission &&
        hasBtnPermission(props.buttonsConfig[i]?.btnPermission as string))
    ) {
      btnArr.push(props.buttonsConfig[i]);
    }
  }
  // 按钮最大个数
  if (btnArr.length <= showMoreNum) return btnArr.slice(0, showMoreNum);
  return btnArr.slice(0, isInclude ? showMoreNum - 1 : showMoreNum);
});

/**
 * 大于3个按钮的显示更多
 */
const moreButtons = computed(() => {
  let btnArr = [];
  let btnLength = props.buttonsConfig?.length;
  for (let i = 0; i < btnLength; i++) {
    if (
      !props.buttonsConfig[i]?.btnPermission ||
      (props.buttonsConfig[i]?.btnPermission &&
        hasBtnPermission(props.buttonsConfig[i]?.btnPermission as string))
    ) {
      btnArr.push(props.buttonsConfig[i]);
    }
  }
  return btnArr.length <= showMoreNum
    ? []
    : btnArr.slice(isInclude ? showMoreNum - 1 : showMoreNum);
});

/**
 * 更多的下拉菜单 点击
 * @param command
 */
function handleMoreButtonCommand(command: number) {
  console.log('handleMoreButtonCommand', command);
  moreButtons.value[command]?.onClick();
}

/**
 * 校验按钮权限
 * @param buttonItem 配置item
 */
function checkBtnPermission(buttonItem: TableButtonItem) {
  if (buttonItem?.btnPermission) {
    return hasBtnPermission(buttonItem?.btnPermission);
  }
  return true;
}
</script>

<style lang="scss">
.c-table-button-group {
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-items: flex-start;
  flex-wrap: nowrap;
  height: 28px;
  .el-button {
    flex-shrink: 0;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
  .c-table-button-group-line {
    flex-shrink: 0;
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #e1e6eb;
  }
}
</style>
